<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调报告生成 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .fire-red {
            background-color: #e63946;
        }
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        .timeline-item {
            position: relative;
            padding-left: 28px;
            padding-bottom: 20px;
        }
        .timeline-item:before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #e63946;
            z-index: 1;
        }
        .timeline-item:after {
            content: '';
            position: absolute;
            left: 5px;
            top: 18px;
            width: 2px;
            height: calc(100% - 18px);
            background-color: #e5e7eb;
        }
        .timeline-item:last-child:after {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="fire-red text-white shadow-md">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center py-3">
                    <div class="flex items-center">
                        <img src="https://img.icons8.com/color/48/000000/fire-element.png" alt="Logo" class="h-10 w-10 mr-2">
                        <span class="text-xl font-bold">火灾调查知识库平台</span>
                    </div>
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-robot mr-1"></i> AI检索功能
                        </a>
                        <a href="report.html" class="nav-item px-3 py-2 text-white font-medium bg-red-700 rounded">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-cockpit.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                        <a href="user-center.html" class="nav-item px-3 py-2 text-white font-medium">
                            <i class="fas fa-user mr-1"></i> 个人中心
                        </a>
                    </nav>
                    <div class="flex items-center space-x-2">
                        <a href="login.html" class="text-white hover:text-gray-200 px-2 py-1">
                            <i class="fas fa-sign-in-alt mr-1"></i> 登录
                        </a>
                        <a href="register.html" class="bg-white text-red-600 hover:bg-gray-100 px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus mr-1"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="container mx-auto px-4 py-8">
            <h1 class="text-2xl font-bold mb-6">火灾调查报告生成</h1>
            
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧 - 步骤和智能体选择 -->
                <div class="lg:col-span-1">
                    <!-- 流程步骤 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h2 class="text-lg font-semibold mb-4">报告生成流程</h2>
                        <div class="timeline">
                            <div class="timeline-item">
                                <h3 class="font-medium">案件基本信息</h3>
                                <p class="text-sm text-gray-600">录入火灾基本信息</p>
                            </div>
                            <div class="timeline-item">
                                <h3 class="font-medium">笔录综合分析</h3>
                                <p class="text-sm text-gray-600">分析询问笔录内容</p>
                            </div>
                            <div class="timeline-item">
                                <h3 class="font-medium">现场勘验分析</h3>
                                <p class="text-sm text-gray-600">分析现场勘验数据</p>
                            </div>
                            <div class="timeline-item">
                                <h3 class="font-medium">物证鉴定分析</h3>
                                <p class="text-sm text-gray-600">分析物证鉴定结果</p>
                            </div>
                            <div class="timeline-item">
                                <h3 class="font-medium">火灾原因认定</h3>
                                <p class="text-sm text-gray-600">综合分析确定火灾原因</p>
                            </div>
                            <div class="timeline-item">
                                <h3 class="font-medium">报告自动生成</h3>
                                <p class="text-sm text-gray-600">生成完整调查报告</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 智能体选择 -->
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <h2 class="text-lg font-semibold mb-4">专家智能体</h2>
                        <div class="space-y-3">
                            <div class="flex items-center p-2 border rounded-md hover:bg-gray-50 cursor-pointer">
                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-user-tie text-blue-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">询问调查专家</h3>
                                    <p class="text-xs text-gray-500">生成询问提纲和分析笔录</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-2 border rounded-md hover:bg-gray-50 cursor-pointer">
                                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-search text-green-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">现场勘验助手</h3>
                                    <p class="text-xs text-gray-500">协助现场勘验数据分析</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-2 border rounded-md hover:bg-gray-50 cursor-pointer">
                                <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-bolt text-yellow-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">电气火灾专家</h3>
                                    <p class="text-xs text-gray-500">分析电气火灾相关证据</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-2 border rounded-md hover:bg-gray-50 cursor-pointer">
                                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-flask text-red-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">化学品火灾专家</h3>
                                    <p class="text-xs text-gray-500">分析化学品火灾相关证据</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-2 border rounded-md hover:bg-gray-50 cursor-pointer">
                                <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-balance-scale text-purple-600"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium">法律顾问</h3>
                                    <p class="text-xs text-gray-500">提供法律法规相关建议</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 中间 - 主要工作区 -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="mb-6">
                            <h2 class="text-xl font-semibold mb-4">案件基本信息</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">案件编号</label>
                                    <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入案件编号">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">火灾发生时间</label>
                                    <input type="datetime-local" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">火灾地点</label>
                                    <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入火灾地点">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">火灾类型</label>
                                    <select class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                                        <option value="">请选择火灾类型</option>
                                        <option value="electric">电气火灾</option>
                                        <option value="chemical">化学品火灾</option>
                                        <option value="gas">燃气火灾</option>
                                        <option value="smoke">吸烟火灾</option>
                                        <option value="other">其他类型</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">建筑类型</label>
                                    <select class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                                        <option value="">请选择建筑类型</option>
                                        <option value="residential">住宅建筑</option>
                                        <option value="commercial">商业建筑</option>
                                        <option value="industrial">工业建筑</option>
                                        <option value="public">公共建筑</option>
                                        <option value="other">其他建筑</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">调查负责人</label>
                                    <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入调查负责人">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h2 class="text-xl font-semibold mb-4">笔录综合分析</h2>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">上传询问笔录</label>
                                <div class="border-dashed border-2 border-gray-300 rounded-md p-6 text-center">
                                    <div class="mb-3">
                                        <i class="fas fa-file-upload text-gray-400 text-3xl"></i>
                                    </div>
                                    <p class="text-sm text-gray-500 mb-2">将询问笔录文件拖放到此处，或</p>
                                    <button class="px-4 py-2 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100">
                                        点击上传文件
                                    </button>
                                    <p class="text-xs text-gray-400 mt-2">支持 .doc, .docx, .pdf, .txt 格式</p>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">已上传笔录</label>
                                <div class="space-y-2">
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div class="flex items-center">
                                            <i class="far fa-file-alt text-blue-500 mr-2"></i>
                                            <span class="text-sm">目击证人张某询问笔录.docx</span>
                                        </div>
                                        <div>
                                            <button class="p-1 text-gray-500 hover:text-gray-700">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="p-1 text-gray-500 hover:text-red-600">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                                        <div class="flex items-center">
                                            <i class="far fa-file-alt text-blue-500 mr-2"></i>
                                            <span class="text-sm">物业工作人员李某询问笔录.docx</span>
                                        </div>
                                        <div>
                                            <button class="p-1 text-gray-500 hover:text-gray-700">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="p-1 text-gray-500 hover:text-red-600">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">分析结果</label>
                                <div class="bg-gray-50 p-4 rounded-md mb-3">
                                    <p class="text-sm text-gray-700">点击"开始分析"按钮，AI将自动分析所有上传的询问笔录，提取关键信息并生成人员关系图谱。</p>
                                </div>
                                <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none">
                                    <i class="fas fa-play-circle mr-1"></i> 开始分析
                                </button>
                            </div>
                        </div>
                        
                        <!-- 现场勘验分析 (此处简化，实际可以根据需要展开) -->
                        <div class="mb-6">
                            <h2 class="text-xl font-semibold mb-4">现场勘验分析</h2>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">上传现场勘验资料</label>
                                <div class="border-dashed border-2 border-gray-300 rounded-md p-6 text-center">
                                    <div class="mb-3">
                                        <i class="fas fa-camera text-gray-400 text-3xl"></i>
                                    </div>
                                    <p class="text-sm text-gray-500 mb-2">将现场照片、视频、勘验记录等拖放到此处，或</p>
                                    <button class="px-4 py-2 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100">
                                        点击上传资料
                                    </button>
                                    <p class="text-xs text-gray-400 mt-2">支持图片、视频、文档等多种格式</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 更多内容可以根据需要添加 -->
                    </div>
                </div>
                
                <!-- 右侧 - 分析结果和预览 -->
                <div class="lg:col-span-1">
                    <!-- 智能分析结果 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h2 class="text-lg font-semibold mb-4">智能分析结果</h2>
                        <div class="space-y-4">
                            <div>
                                <h3 class="text-sm font-medium flex items-center">
                                    <i class="fas fa-user-friends text-blue-500 mr-1"></i> 人员关系图谱
                                </h3>
                                <div class="mt-2 p-2 bg-blue-50 rounded-md text-center">
                                    <img src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*2OGPRKRlxEsl1nqCvvkiCg.png" alt="人员关系图谱" class="w-full h-32 object-cover rounded">
                                    <p class="text-xs text-gray-500 mt-1">点击查看完整图谱</p>
                                </div>
                            </div>
                            
                            <div>
                                <h3 class="text-sm font-medium flex items-center">
                                    <i class="fas fa-clock text-green-500 mr-1"></i> 事件时间线
                                </h3>
                                <div class="mt-2 p-2 bg-green-50 rounded-md">
                                    <ul class="text-xs space-y-2">
                                        <li class="flex">
                                            <span class="font-medium mr-2">20:30</span>
                                            <span>居民张某发现异常烟雾</span>
                                        </li>
                                        <li class="flex">
                                            <span class="font-medium mr-2">20:35</span>
                                            <span>物业接到报警</span>
                                        </li>
                                        <li class="flex">
                                            <span class="font-medium mr-2">20:40</span>
                                            <span>消防队接警出动</span>
                                        </li>
                                        <li class="flex">
                                            <span class="font-medium mr-2">20:55</span>
                                            <span>火势得到控制</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div>
                                <h3 class="text-sm font-medium flex items-center">
                                    <i class="fas fa-fire-alt text-red-500 mr-1"></i> 火灾原因分析
                                </h3>
                                <div class="mt-2 p-2 bg-red-50 rounded-md">
                                    <p class="text-xs">根据现有证据，初步判断火灾原因可能为：</p>
                                    <div class="mt-1 flex items-center">
                                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                                            <div class="bg-red-600 h-2.5 rounded-full" style="width: 70%"></div>
                                        </div>
                                        <span class="ml-2 text-xs font-medium">70%</span>
                                    </div>
                                    <p class="text-xs mt-1">电气线路老化导致短路</p>
                                </div>
                            </div>
                        </div>
                        <button class="w-full mt-4 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none">
                            查看完整分析报告
                        </button>
                    </div>
                    
                    <!-- 报告预览 -->
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <h2 class="text-lg font-semibold mb-4">报告预览</h2>
                        <div class="border rounded-md p-4 bg-gray-50 mb-4">
                            <div class="text-center mb-4">
                                <h3 class="font-bold text-lg">火灾事故调查报告</h3>
                                <p class="text-sm text-gray-500">(预览版)</p>
                            </div>
                            <div class="space-y-2 text-sm">
                                <p><strong>案件编号：</strong>202X-XX-XXX</p>
                                <p><strong>发生时间：</strong>202X年XX月XX日20:30</p>
                                <p><strong>发生地点：</strong>XX小区X栋X单元</p>
                                <p><strong>事故概况：</strong>...</p>
                                <p>...</p>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <button class="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none">
                                <i class="fas fa-file-alt mr-1"></i> 生成报告
                            </button>
                            <button class="px-3 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none">
                                <i class="fas fa-cog"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <footer class="bg-gray-800 text-white py-8 mt-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关于我们</h3>
                        <p class="text-gray-400 text-sm">火灾调查知识库平台致力于提供全面的火灾调查知识和智能工具，助力消防安全工作的开展。</p>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">快速链接</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><a href="#" class="hover:text-white">首页</a></li>
                            <li><a href="#" class="hover:text-white">知识检索</a></li>
                            <li><a href="#" class="hover:text-white">知识图谱</a></li>
                            <li><a href="#" class="hover:text-white">火调报告</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">联系我们</h3>
                        <ul class="text-gray-400 text-sm space-y-2">
                            <li><i class="fas fa-envelope mr-2"></i> contact@firekb.com</li>
                            <li><i class="fas fa-phone mr-2"></i> 400-123-4567</li>
                            <li><i class="fas fa-map-marker-alt mr-2"></i> 北京市海淀区学院路消防大厦</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-lg font-semibold mb-3">关注我们</h3>
                        <div class="flex space-x-3">
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition duration-300">
                                <i class="fab fa-qq"></i>
                            </a>
                        </div>
                        <p class="text-gray-400 text-sm mt-3">扫描二维码关注公众号</p>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 mt-8 pt-4 text-center text-gray-400 text-sm">
                    <p>© 2023 火灾调查知识库平台 版权所有</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Vue初始化代码
        const app = Vue.createApp({
            data() {
                return {
                    // 数据
                }
            },
            methods: {
                // 方法
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 